<script setup>
import { ref } from 'vue'
import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
const tabs=['进行中','已完成']
const index1=ref(0)
const tabchange=(value)=>{
  index1.value=value
}
const arr = [
  {
    icon: '',
    title: '招生能力测试',
    to: '/pages/index/test1',
  }, {
    icon: '',
    title: '招生能力测试',
    to: '/pages/index/test2',
  }, {
    icon: '',
    title: '招生能力测试',
    to: '/pages/index/test3',
  }
]
const test = (to) => {
  uni.navigateTo({
    url: to
  })
}
</script>

<template>
  <liuyuno-tabs  @tabClick="tabchange" tabindex="index1"  :tabData="tabs"></liuyuno-tabs>
  <view class="main">
    <view v-if="index1==0">
    <view class="input" v-for="(item,index) in arr":key="index">
      <view class="inputin" @click="test(item.to)">
        <text class="d1">2023届招生能力测试题目</text>
        <br>
        <view class="d4">
        <text class="d2">
          开始日期：2023/03/29 <br>
          结束日期：2023/03/29 <br>
          剩余提交时间：
        </text>
        <text class="d3">3天4时5分</text>
          <view class="d5"></view>
        </view>
      </view>
    </view>
  </view>
    <view v-else-if="index1==1">
      <view class="d6">暂无已完成的测试，快去完成吧！</view>
    </view>
  </view>
</template>

<style scoped>
.main {
  background: #F1F5FF;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
}
.input{
  justify-content:center ;
  display: flex;
}
.inputin{
  width: 343px;
  height: 170px;
  background: #FFFFFF;
  box-shadow: 0 3px 6px 0 #c9cfd980;
  border-radius: 8px;
  margin-top: 20px;
}
.d1{
  width: 183px;
  height: 22px;
  font-weight: 500;
  font-size: 16px;
  color: #000000;
  letter-spacing: 0;
  margin: 20px 10px;
}
.d2 {
  color: #5d5c5c;
  font-size: 12px;
  font-face: PingFangSC;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  paragraph-spacing: 0;
  text-align: left;
}
.d3{
  color: #ff7700;
  font-size: 12px;
  font-face: PingFangSC;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  paragraph-spacing: 0;
  text-align: left;
}
.d4{
  margin-left: 20px;
}
.d5{
  width: 311px;
  height: 1px;
  opacity: 0.2;
  border: 1px solid #979797;
}
.d6{
  justify-content: center;
  display: flex;
  padding-top: 250px;
}
</style>